<template>
  <div class="article-editor">
    <Row :gutter="24">
      <Col :span="17">
        <Card :bordered="false" :title="article?.title" class="article-editor">
          <template #extra>
            <slot name="extra" />
          </template>
          <MainForm ref="mainFormRef" :form="articleEditor" />
        </Card>
      </Col>
      <Col :span="7">
        <Row :gutter="[24, 24]">
          <Col :span="24">
            <Card title="分类目录" :bordered="false">
              <CategoryForm ref="categoryFormRef" :form="articleEditor" />
            </Card>
          </Col>
          <Col :span="24">
            <Card title="缩略图" :bordered="false">
              <ImageUploader
                :value="articleEditor.thumbnail"
                :disabled-input="false"
                :disabled-markdown="false"
                :on-change="(url: string) => articleEditor.thumbnail = url"
              />
            </Card>
          </Col>
          <Col :span="24">
            <Card title="自定义扩展" :bordered="false">
              <FormDataKeyValue v-model:value="articleEditor.extends" />
            </Card>
          </Col>
          <Col :span="24">
            <Card title="发布选项" :bordered="false">
              <StateForm
                ref="stateFormRef"
                :submitLoading="submitLoading"
                v-model:form="articleEditor"
                @submit="handleSubmit"
              />
            </Card>
          </Col>
        </Row>
      </Col>
    </Row>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, watch, onMounted } from 'vue'
import type { PropType } from 'vue'

import type { Article } from '@/constants/article'
import { ArticleOrigin } from '@/constants/article/origin'
import { PublishState } from '@/constants/publish'
import { ArticlePublic } from '@/constants/article/public'

import ImageUploader from '@/components/ImageUploader/index.vue'
import FormDataKeyValue from '@/components/FormDataKeyValue/index.vue'
import CategoryForm, { CategoryFormExpose } from './Category.vue'
import MainForm, { MainFormExpose } from './Main.vue'
import StateForm, { StateFormExpose } from './State.vue'
import { ArticleLanguage } from '@/constants/article/language'
import { Card, Col, Row, message } from 'ant-design-vue'

const DEFAULT_ARTICLE = (): Article => ({
  slug: '',
  title: '',
  description: '',
  keywords: [],
  content: '',
  thumbnail: '',
  origin: ArticleOrigin.Original,
  state: PublishState.Published,
  public: ArticlePublic.Public,
  lang: ArticleLanguage.Chinese,
  disabled_comment: false,
  tag: [],
  category: [],
  extends: [],
})

const props = defineProps({
  article: {
    type: Object as PropType<Article | null>,
  },
  submitLoading: {
    type: Boolean,
  },
})
const emits = defineEmits(['submit'])

// 文章表单
const articleEditor = reactive<Article>(DEFAULT_ARTICLE())

// 文章内容Ref
const mainFormRef = ref<MainFormExpose | null>(null)

// 分类表单Ref
const categoryFormRef = ref<CategoryFormExpose | null>(null)

// 状态表单Ref
const stateFormRef = ref<StateFormExpose | null>(null)

const setFormsValue = (formValue: Article) => {
  Object.assign(articleEditor, formValue)
}

const handleSubmit = async () => {
  try {
    const mainForm = await mainFormRef.value?.validate()
    const categoryForm = await categoryFormRef.value?.validate()
    const stateForm = await stateFormRef.value?.validate()
    const data = {
      ...articleEditor,
      ...mainForm,
      ...categoryForm,
      ...stateForm,
      extends: [],
    }
    emits('submit', data)
  } catch (error) {
    console.warn('Article 提交错误：', error)
    message.error('请检查表单中的不合法项')
  }
}

watch(
  () => props.article,
  () => {
    if (props.article) {
      setFormsValue(props.article)
    }
  }
)

onMounted(() => {
  // setFormsValue(DEFAULT_ARTICLE());
})
</script>

<style lang="less" scoped>
.categorySelect {
  :deep(.ant-tree-treenode) {
    margin-bottom: 1rem;

    &:last-child {
      margin-bottom: 0;
    }
  }

  :deep(.ant-tree-checkbox) {
    margin: 0 8px;
    margin-top: 5px;
  }
}
</style>
